{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/side-menu.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.css')}}">
{% endblock %}

{% block body %}
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="/">Hello GitHub</a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="/" class="pure-menu-link">返回首页</a></li>
                <li class="menu-item-divided pure-menu-selected">
                    <a href="#" class="pure-menu-link">我的收藏</a>
                </li>
                {% if session.is_admin %}
                    <li class="pure-menu-item"><a href="/manage/" class="pure-menu-link">管理后台</a></li>
                {% endif %}
                <li class="pure-menu-item"><a href="/sign/out/" class="pure-menu-link">注销</a></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="header">
            <h2>我的收藏</h2>
        </div>

        <div class="content">
            {% for collection in collections %}
            <div class="pure-u-g collection-item">
                <div class="pure-u-md-1-1 collection-item-info">
                    <span class="item-id" hidden>{{ collection.id }}</span>
                    <i class="item-del fa fa-window-close color-red"></i>
                    <span class="item-name">{{ collection.name }}</span>
                    <div class="pure-u-md-1"><span class="item-time">创建时间：{{ collection.create_time }}</span></div>
                </div>
                <div class="collection-project pure-u-md-1-1" hidden="hidden">

                    {% if collection.projects %}
                        {% for project_obj in collection.projects %}
                        <div class="collection-project-info">
                            <i class="fa fa-github-alt" aria-hidden="true"></i>
                            <a target="_blank" href="{{ project_obj.project_url }}">{{ project_obj.name }}</a>
                            <i id="collect_{{ project_obj.id }}" class="fa fa-heart color-blue" aria-hidden="true"></i>
                            <span hidden="hidden">{{ project_obj.id }}</span>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="collection-project">
                            空
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            <div class="pure-u-g collection-form">
                <div class="pure-u-md-1-1 collection-item-info">
                    <form class="pure-form">
                        <fieldset>
                            <input name="collection_name" type="text" placeholder="收藏夹名称">
                            <button type="submit" class="pure-button pure-button-primary">创建</button>
                        </fieldset>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/collect.js') }}"></script>
{% endblock %}